<template>
  <render />
  <!--  <a-select :mode="mode" v-model="innerValue"-->
  <!--            :placeholder="placeholder" :allow-clear="allowClear"-->
  <!--            style="min-width: 120px; width: 100%" v-model:value="innerValue">-->
  <!--    <a-select-option v-for="item in options"-->
  <!--                     :key="item.key" :value="item.value">-->
  <!--      {{ item.title }}-->
  <!--    </a-select-option>-->
  <!--  </a-select>-->
</template>
<script setup>
import { computed, h, shallowRef, useAttrs, watch } from "vue";
import { getDictItems } from "@/api/common/api";
import { isArray } from "lodash-es";
import { Select, SelectOption } from "ant-design-vue";

const options = shallowRef([]);
defineOptions({ name: "DictSelect" });
const attrs = useAttrs();
const props = defineProps({
  allowClear: {
    type: Boolean,
    default: false
  },
  mode: {
    type: String,
    default: undefined
  },
  value: {
    type: String,
    default: undefined
  },
  title: {
    type: String,
    default: undefined
  },
  label: {
    type: String,
    default: undefined
  },
  dictCode: {
    type: String,
    default: undefined
  },
  placeholder: {
    type: String,
    default: undefined
  },
  maxTagCount: {
    type: Number,
    default: 500
  },
  selectAll: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits(["update:value", "update:title", "change"]);
const innerValue = computed({
  get() {
    let value = props.value;
    if (!value) return undefined;
    if (!props.mode || props.mode === "combobox") {
      //单选
    } else {
      //多选
      value = value.split(",");
    }
    return value;
  },
  set(value) {
    if (isArray(value)) {
      value = value.toString();
    }
    emits("update:value", value);
    emits("change", value);
    props.onChange && props.onChange();
  }
});

function loadDictItem() {
  getDictItems(props.dictCode).then(data => {
    options.value = data || [];
  });
}

watch(() => props.dictCode, value => {
  if (value && value !== "") loadDictItem();
}, {
  immediate: true
});
watch(() => props.value, () => {
  if (!props.value) {
    emits("update:title", undefined);
    return;
  }
  let set = new Set(props.value.split(","));
  let list = [];
  options.value.forEach(o => {
    if (set.has(o.value)) {
      list.push(o.title);
    }
  });
  emits("update:title", list.length === 0 ? undefined : list.toString());
});

function createSelectProps() {
  return {
    maxTagCount: props.maxTagCount,
    mode: props.mode,
    value: innerValue.value,
    placeholder: props.placeholder,
    allowClear: props.allowClear,
    style: {
      minWidth: "120px",
      width: "100%"
    },
    "onUpdate:value": (value) => {
      innerValue.value = value;
    }
  };
}

function renderProps() {
  return options.value.map(o => h(SelectOption, {
    key: o.key,
    value: o.value
  }, { default: () => [o.title] }));
}

function renderSelect() {
  return h(Select, createSelectProps(), { default: renderProps });
}

function selectAll() {
  innerValue.value = options.value.map(item => item.value).toString();
}

function createSelectAllButton() {
  return h("div", {
    style: {
      display: "flex",
      width: "60px",
      alignItems: "center",
      justifyContent: "center"
    },
    onClick: () => selectAll()
  }, [h("a", ["全选"])]);
}

const isSelectMultiple = computed(() => {
  return props.mode === "tags" || props.mode === "multiple";
});

function render() {
  if (props.selectAll && isSelectMultiple.value) {
    return h("div",
      { style: { display: "flex", alignItems: "center", justifyContent: "center" } }, {
        default: () => [renderSelect(), createSelectAllButton()]
      });
  }
  return renderSelect();
}

</script>
